<template>
	<view :data-theme="theme">
		<view class="proxy-total">
			<scroll-view class="proxy-table" scroll-x="true" scroll-left="120">
				<view class="proxy-table-item" :class="proxyIndex == key?'on':''" v-for="(item, key) in tabList" :inxex:='key' @click="changeProxy(item, key)">
					<text v-if="item.level == 1">{{item.province}}</text>
					<text v-else-if="item.level == 2">{{item.city}}</text>
					<text v-else-if="item.level == 3">{{item.area}}</text>
					<text v-else>特通渠道</text>
				</view>
			</scroll-view>
			<view class="proxy-msg">
				<view class="proxy-msg-line1">
					<view>
						<view class="proxy-msg-text1">{{proxy.level=='3'?'区域水站数量':'区域站长数量'}}</view>
						<view class="proxy-msg-text2">{{proxy.storeTotal || 0}}</view>
					</view>
					<view>
						<view class="proxy-msg-text1">累计区域收益（元）</view>
						<view class="proxy-msg-text2">{{proxy.totalProfit || 0}}</view>
					</view>
				</view>
				<view class="proxy-msg-line1">
					<view>
						<view class="proxy-msg-text1">今日区域收益（元）</view>
						<view class="proxy-msg-text2">{{proxy.todayProfit || 0}}</view>
					</view>
					<view>
						<view class="proxy-msg-text1">本月区域收益（元）</view>
						<view class="proxy-msg-text2">{{proxy.monthProfit || 0}}</view>
					</view>
				</view>
				<view class="proxy-msg-line1">
					<view>
						<view class="proxy-msg-text1">上月区域收益（元）</view>
						<view class="proxy-msg-text2">{{proxy.lastMonthProfit || 0}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="proxy-search">
			<text class="iconfont icon-sousuo6"></text>
			<input type='text' placeholder="输入水站的名称" v-model='keywords' @confirm="search"></input>
		</view>
		<view style="padding: 40rpx 30rpx 0 30rpx;">
			<view class="item" v-for="(item, key) in list" :index='key'>
				<view class="item-title">
					<span class="iconfont2 icon2-mendian" style="color: #979797;font-size: 32rpx;"></span>
					<text>{{item.name}}</text>
				</view>
				<view class="item-message">
					<image :src="item.image"></image>
					<view class="item-msg">
						<view class="item-text">今日卖水订单：{{item.todayOrderCount || 0}}单</view>
						<view class="item-text">今日营业额：{{item.todayOrderMoney || 0}}元</view>
						<view class="item-text">今日收益：{{item.todayProfit || 0}}元</view>
						<view class="item-text">累计收益：{{item.totalProfit || 0}}元</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		agentTotal,
		agentList,
	} from '@/api/store.js';
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from "vuex";
	import emptyPage from '@/components/emptyPage.vue';
	let app = getApp();
	export default {
		components: {
			emptyPage
		},
		filters: {
			reasonTypeStr(val) {
				return {
					'0': '购买',
					'1': '赠送',
					'2': '受赠',
					'3': '扫码出水',
				}[val]
			}
		},
		data() {
			return {
				tabList: {},
				proxy: {},
				proxyIndex: 0,
				keywords: '',
				page: 1,
				limit: 20,
				loaded: true,
				loading: false,
				list: [],
				
				theme:app.globalData.theme,
			};
		},
		computed: mapGetters(['isLogin','userInfo']),
		onShow() {
			
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			this.getAgentTotal()
		},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {
			this.getList();
		},
		methods: {
			search(e) {
				this.keywords = e.detail.value
				this.changeProxy(this.proxy, this.proxyIndex)
			},
			changeProxy(item, index) {
				this.proxyIndex = index
				this.page = 1
				this.list = []
				this.loaded = false
				this.loading = false
				this.proxy = item
				this.getList();
			},
			getList() {
				if (this.loading || this.loaded) return;
				this.loading = true;
				let data = {
					level: this.proxy.level,
					province: this.proxy.province,
					city: this.proxy.city,
					area: this.proxy.area,
					keywords: this.keywords,
					page: this.page,
					limit: this.limit
				};
				agentList(data)
				.then(res => {
					this.loading = false;
					this.list.push.apply(this.list, res.data.list);
					this.page = this.page + 1;
					this.loaded = res.data.totalPage < this.page;
				})
				.catch(err => {
					this.$dialog.error(err);
				});
			},
			getAgentTotal() {
				agentTotal({}).then(res => {
					this.tabList = res.data || []
					this.changeProxy(this.tabList[0] || {},0)
				})
			},
		}
	}
</script>

<style scoped lang='scss'>
	.item-msg{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: start;
	}
	.item-text{
		font-size: 26rpx;
		color: #333333;
	}
	.item-message{
		padding: 26rpx 0 40rpx 0;
		border-bottom: 1rpx solid #D8D8D8;
		display: flex;
		image{
			width: 196rpx;
			height: 206rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			margin-right: 38rpx;
		}
	}
	.item{
		width: 690rpx;
		padding: 0 20rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		position: relative;
	}
	.item-title{
		display: flex;
		align-items: center;
		padding-top: 40rpx;
		text{
			font-size: 32rpx;
			color: #333333;
			margin-left: 8rpx;
		}
	}
	.proxy-search{
		margin: 0 30rpx;
		padding: 0 40rpx;
		height: 80rpx;
		background: #FFFFFF;
		border-radius: 40rpx;
		border: 2rpx solid #EDEDED;
		display: flex;
		align-items: center;
		font-size: 28rpx;
		color: #979797;
		input{
			flex: 1;
			margin-left: 12rpx;
		}
	}
	.proxy-msg{
		width: 690rpx;
		padding: 40rpx;
		height: 480rpx;
		background: #FFFFFF;
		margin-top: 36rpx;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.proxy-msg-line1{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.proxy-msg-text1{
		font-size: 24rpx;
		color: #747474;
		margin-bottom: 18rpx;
	}
	.proxy-msg-text2{
		font-size: 30rpx;
		color: #333333;
	}
	.proxy-total{
		width: 100vw;
		background: linear-gradient( 180deg, #FFF1F1 0%, rgba(255,241,241,0) 100%);
		padding: 60rpx 30rpx;
		padding-bottom: 40rpx;
	}
	.proxy-table{
		white-space: nowrap;
		width: 100%;
	}
	.proxy-table-item{
		display: inline-flex;
		font-size: 28rpx;
		height: 55rpx;
		color: #666666;
		margin-right: 88rpx;
	}
	.on{
		position: relative;
		@include main_color(theme);
		&::after{
			content: '';
			position: absolute;
			bottom: 0%;
			left: 50%;
			transform: translate(-50%, 0%);
			@include main_bg_color(theme);
			width: 48rpx;
			height: 6rpx;
			border-radius: 6rpx;
		}
	}
</style>
